import React, { Component,createRef } from 'react'
import echarts from 'echarts'
import {getChartsData} from '../../api/charts'
// import 'echarts/map/js/province/xianggang.js'
import 'echarts/map/js/china.js'

export default class Dashboard extends Component {

  echartsRef = createRef()

  async componentDidMount(){
    // 获取数据
    const resData = await getChartsData()
    const chartsData = JSON.parse(resData.data.data)
    console.log('疫情数据：',chartsData)

    // 构建地图渲染的数据
    const data = chartsData.areaTree[0].children.map(provice => {
        return {
            name:provice.name,
            value:provice.total.nowConfirm
        }
    })

    // 创建 echarts 实例
    const chinaChart = echarts.init(this.echartsRef.current);
    // 配置选项
    const chinaoption={
        title: {  // 标题
            text: '最新国内疫情数据统计',
            subtext: '数据来源于腾讯接口',
            sublink: 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5'
        },
        tooltip: {  // 提示
            trigger: 'item',
            formatter: '{b}<br/>{c}'
        },
        visualMap: {  // 视觉效果
            type:'piecewise',  // 分段型
            pieces:[  // 每一段的范围及样式
                {gte:10000, color:'#f00'},
                {gte:1000, lte:9999 ,color:'#f00',colorAlpha:0.8},
                {gte:100, lte:999 ,color:'#f00',colorAlpha:0.6},
                {gte:10, lte:99 ,color:'#f00',colorAlpha:0.4},
                {gte:1, lte:9 ,color:'#f00',colorAlpha:0.2},
                {value: 0,color:'#fff'}

            ]
        },
        series: [   // 序列（数据）
            {
                name: '疫情数据',
                type: 'map',
                mapType: 'china', // 自定义扩展图表类型
                label: {
                    show: true
                },
                data
            }
        ]
    }
    // 配置
    chinaChart.setOption(chinaoption)
}

  render() {
    return (
      <div>
        <div ref={this.echartsRef} style={{width:1200,height:800}}></div>
      </div>
    )
  }
}
